<?php
include("header.php");


?>
<script>
$(document).ready(function(){

	$("#submit").click(function(){

		var username = $("#username").val();
		var password = $("#password").val();
		$.post(
			"login.php",
			{username:username,password:password},
			function(data){
				if(data=="parent"){
					window.location = "parent.php";
				}
				else if(data=="teacher"){
					window.location = "teacher.php";
				}
				else if(data=="admin"){
					window.location = "admin.php";
				}
				else if(data=="wrong"){
					$(".notice").html("Invalid Username or Password");
				}
			}	
		);	
	});

	$(window).scroll(function()
			{
				$('#login').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});  
			});		
	$('#close_login').click(function()
			{
		  		//the messagebox gets scrool down with top property and gets hidden with zero opacity 
				$('#login').fadeOut("slow");
				
			});	

});
function login(){
	$("#login").fadeIn("slow");
	

}
</script> 
<div id="login_gif"><?php if($_SESSION['userid']){ ?> <a href="logout.php"> <?php }else{ ?><a href="javascript:void(0)" onclick="javascript:login()"><?php } ?><img src="images/login.gif" border=0></a></div>
<div id="home_body">
	<center>
	<div id="home_navi">
		<div class="navi_img">
			<a href="index.php"><img src="images/ourclass.gif"  border="0" height="160"></a>
		</div>          
		<div class="navi_img">                 
			<a href="admin.php"><img src="images/ourstudies.gif"  border="0" height="160"></a>
		</div>           
		<div class="navi_img">
			<a href="photo.php"><img src="images/ourschool.gif" border="0" height="160"></a>
		</div>
		<div class="navi_img">
			<a href="parent.php"><img src="images/justforkids.gif" border="0" height="160"></a>
		</div>
		<div class="navi_img">
			<a href="teacher.php"><img src="images/justforparents.gif"  border="0" height="160"></a>
		</div>
	</div>
	<div id="home_content">
		<div id="leftside">
		</div>
		<div id="home_main_content">
			<div id="welcome">
				<img src="images/sk_kid5a.gif" border="0">
				<img src="images/welcome.gif" border="0" style="margin-bottom:80px;">
			</div>
			<div id="introduction">
				Here are the introduction of kindergarten, write anything that your guys like..............
			</div>
			<div id="news">
				<img src = "images/newsbanner.gif" border="0"><br>
				<iframe name="I1" 
				src="pieces/newsbox.php" 
				width="339" height="131">
						Your browser does not support inline frames or is currently configured
				 not to display inline frames.
				</iframe>				
			</div>
			<br>
			<br>
			<img src="images/divider.gif" border="0">
		</div>
		<div id="rightside">
		</div>
	</div>
	</center>
	<div id="login" <?php if(isset($_GET['notice'])){}else{?>style="display:none"<?php } ?>>
	<img id="close_login" style="float:right;cursor:pointer"  src="images/cross.png" />
	<table>
	<tr>
		<td colspan="2">Please Login</td>
	</tr>
	<tr>
		<td>Username</td><td><input type="text" name="username" id="username"></td>
	</tr>
	<tr>
		<td>Password</td><td><input type="password" name="password" id="password"></td>
	</tr>
	<tr>
		<td colspan="2"><input type="button" id="submit" value="Login"></td>
	</tr>
	<tr>
		<td colspan="2" class="notice"><?php echo $_GET['notice'] ?></td>
	</tr>
	</table>
	</div>
</div>